import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Table, Space, Button, Modal, Input, Popconfirm, message } from 'antd'
import { getList } from '../api/list'


const { Search } = Input;

function cancel(e) {
    message.error('取消删除');
}


export class Crud extends Component {
    confirm = (index) => {
        this.props.del(index)
        message.success('删除成功');
    }
    state = {
        columns: [
            {
                // 控制表头的名称
                title: '名称',
                // 匹配data中的字段
                dataIndex: 'name',
                // 唯一值
                key: 'name',
                // 自定义渲染
                render: text => <a>{text}</a>,
            },
            {
                title: '缩写名',
                dataIndex: 'short',
                key: 'short',
            },
            {
                title: '文章数',
                dataIndex: 'count',
                key: 'count',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record, index) => (
                    // 空格组件
                    <Space size="middle">
                        <Button onClick={() => {
                            this.setState({
                                editVisible: true,
                                editForm: text
                            })
                        }} type="primary">编辑</Button>
                        <Popconfirm
                            title="确定要删除么?"
                            onConfirm={() => {
                                this.confirm(index)
                            }}
                            onCancel={cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" danger>删除</Button>
                        </Popconfirm>
                    </Space>
                ),
            },
        ],
        // 控制新增弹框
        visible: false,
        // 控制编辑弹框
        editVisible: false,
        form: {
            name: '',
            short: '',
            count: ''
        },
        // 编辑弹框绑定内容
        editForm: {}
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        let form = this.state.form
        form.key = String(Math.random()).slice(4, 8)
        this.props.add(form)
        this.setState({
            visible: false,
            form: {}
        });
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };

    search = (value) => {
        this.props.search(value)
    }

    // 编辑弹框确定
    editHandleOk = () => {
        this.setState({
            editVisible: false
        })
        this.props.edit(this.state.editForm)
    }
    // 编辑弹框取消
    editHandleCancel = () => {
        this.setState({
            editVisible: false
        })
    }
    render() {
        const { list } = this.props
        const { form, columns, editForm } = this.state
        return (
            <div>
                {/* 搜索 */}
                <Search placeholder="请输入要搜索的内容"
                    onSearch={this.search}
                    enterButton />
                {/* 新增 */}
                <div>
                    <Button type="primary" onClick={this.showModal}>
                        新增
                    </Button>
                    <Modal
                        title="新增信息"
                        visible={this.state.visible}
                        okText="确定"
                        cancelText="取消"
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                        <p className='text'>
                            <span>名称:</span>
                            <Input value={form.name} onChange={(ev) => {
                                let form = { ...this.state.form }
                                form.name = ev.target.value
                                this.setState({
                                    form
                                })
                            }} />
                        </p>
                        <p className='text'>
                            <span>缩写:</span>
                            <Input value={form.short} onChange={(ev) => {
                                let form = { ...this.state.form }
                                form.short = ev.target.value
                                this.setState({
                                    form
                                })
                            }} />
                        </p>
                        <p className='text'>
                            <span>数量:</span>
                            <Input value={form.count} onChange={(ev) => {
                                let form = { ...this.state.form }
                                form.count = ev.target.value
                                this.setState({
                                    form
                                })
                            }} />
                        </p>
                    </Modal>
                </div>
                {/* 编辑 */}
                <Modal
                    title="编辑信息"
                    visible={this.state.editVisible}
                    okText="确定"
                    cancelText="取消"
                    onOk={this.editHandleOk}
                    onCancel={this.editHandleCancel}
                >
                    <p className='text'>
                        <span>名称:</span>
                        <Input value={editForm.name} onChange={(ev) => {
                            let editForm = { ...this.state.editForm }
                            editForm.name = ev.target.value
                            this.setState({
                                editForm
                            })
                        }} />
                    </p>
                    <p className='text'>
                        <span>缩写:</span>
                        <Input value={editForm.short} onChange={(ev) => {
                            let editForm = { ...this.state.editForm }
                            editForm.short = ev.target.value
                            this.setState({
                                editForm
                            })
                        }} />
                    </p>
                    <p className='text'>
                        <span>数量:</span>
                        <Input value={editForm.count} onChange={(ev) => {
                            let editForm = { ...this.state.editForm }
                            editForm.count = ev.target.value
                            this.setState({
                                editForm
                            })
                        }} />
                    </p>
                </Modal>
                {/* 表格 */}
                <Table columns={columns} dataSource={list} />
            </div>
        )
    }
    componentDidMount() {
        this.props.init()
    }
}

const mapStateToProps = (state) => {
    const { list } = state
    return {
        list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        init() {
            dispatch((next) => {
                getList().then(res => {
                    next({ type: "INIT", list: res.data.list })
                })
            })
        },
        add(form) {
            dispatch({ type: "ADD_ITEM", form })
        },
        del(index) {
            dispatch({ type: "DEL_ITEM", index })
        },
        search(value) {
            dispatch({ type: "SEARCH", value })
        },
        edit(form) {
            dispatch({ type: "EDIT", form })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Crud)